<template>
	<view class="myMsg">
		<!-- 个人信息 -->
		<view class="header">
			<view class="myMsg-header">
				<view class="img">
					<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/969eeb50-3b4d-11eb-bf0a-894cbc80c40a.png" mode="aspectFill"></image>
				</view>
				
				<view class="myMsg-txt">
					<view class="title">七月上er</view>
					<view class="title-msg">小红书号：er133799</view>
					<view class="myMsg-list">
						<view class="detial">
							<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/566a74f0-3b4d-11eb-8ff1-d5dcf8779628.png" mode="aspectFill"></image>
						</view>
						<view class="city">不丹</view>
						<view class="class">困困薯</view>	
					</view>	
				</view>		
			</view>
					
			<view class="msg">她想要的不多，只是和别人的不一样。</view>
			
			<view class="msg-list">
				<view class="msg-list-item">
					<view class="">14</view>
					<view class="">关注</view>
				</view>
				<view class="msg-list-item">
					<view class="">30</view>
					<view class="">粉丝</view>
				</view>
				<view class="msg-list-item">
					<view class="">165</view>
					<view class="">获赞与收藏</view>
				</view>
				<view class="msg-list-img">
					<navigator url="../setting/setting">
						<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/531333a0-3b4d-11eb-bf0a-894cbc80c40a.png" mode="aspectFill"></image>
					</navigator>
				</view>
			</view>
			
		</view>
		
		<!-- 内容 -->
		<view class="content">
			<view class="tab">
				<view class="tab-title">
					<view class="tab-title-item1" @click="current = 0">笔记</view>
					<view class="tab-title-item2" @click="current = 1">收藏</view>
				</view>	
			</view>
			
			
			
			<view class="tab-content">
				<waterfallsFlow :list="list">
					<!--  #ifdef  MP-WEIXIN -->
					<view v-for="(item, index) of list" :key="index" slot="slot{{index}}">
						<view class="cnt">
							<view class="title">{{ item.title }}</view>
							<view class="text">{{ item.text }}</view>
							<view class="bottom">
								<view class="bottom-img">
									<image :src="item.image1_url" mode="aspectFill"></image>
								</view>
								<view class="bottom-msg">{{ item.msg }}</view>
								<view class="bottom-icon" @click="addNum(item.id)">
									<image :src="item.icon_ur" mode="aspectFill"></image>
								</view>
								<view class="bottom-num" >{{ item.number }}</view>
							</view>
							
						</view>
					</view>
					<!--  #endif -->
				
					<!-- #ifndef  MP-WEIXIN -->
					<view v-slot:default="item">
						<view class="cnt">
							<view class="title">{{ item.title }}</view>
							<view class="text">{{ item.text }}</view>
							
						</view>
					</view>
					<!-- #endif -->
				</waterfallsFlow>
				
			</view>
		</view>
		
		
	</view>
	
</template>

<script>
	import waterfallsFlow from "@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue";
	
	let list = [{
		id: 1,
		image_url:
		"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599475741266&di=e36d6c01c93320e2ba1504d8357248f4&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F30%2F29%2F01300000201438121627296084016.jpg",
		title: "可爱的小猫咪呀",
		type: 0,
		image1_url:
		"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607570927986&di=896ffdf8d544c4c6630af927f1fdb470&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201902%2F17%2F20190217231515_ixMhS.thumb.700_0.jpeg",
		msg:"柴犬犬",
		icon_url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/fe031420-3b4c-11eb-bd01-97bc1429a9ff.png",
		number: "12",
		text: "小小的猫咪，甚是呆萌，呆萌呆萌呆萌呆萌呆萌呆萌呆萌呆萌",
		},
		{
		id: 2,
		image_url:
		"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599475934834&di=7a37b8d628252c4aced6ed0decba9442&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F43%2F74%2F01300000164151121808741085971.jpg",
		title: "迪士尼动画",
		type: 1,
		image1_url:
		"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3617442206,1150108905&fm=26&gp=0.jpg",
		icon_url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/fe031420-3b4c-11eb-bd01-97bc1429a9ff.png",
		number: "12",
		text: "迪士尼动画之……",
		},
		{
		id: 3,
		image_url:
		"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599476083909&di=a5debff35edec5de105bc105d6fdbce3&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F77%2F77%2F01300000336597125202779973172.jpg",
		title: "火箭",
		type: 0,
		image1_url:
		"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607580766183&di=6ffc9e01b891e77a991b311f477d2e76&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201708%2F02%2F20170802072206_v5FEN.jpeg",
		msg:"圣诞猫",
		icon_url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/fe031420-3b4c-11eb-bd01-97bc1429a9ff.png",
		number: "432",
		text: "火箭升空瞬间，宏伟壮观啊",
		},
		{
		id: 4,
		image_url:
		"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599476129760&di=7a3db0b14f6a74240bbfa7922ba22f45&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F82%2F55%2F01300000349330124003555691086.jpg",
		title: "华佗",
		type: 1,
		image1_url:
		"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607580831046&di=91e37c2600a86e4e5f3a082464e6a031&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201505%2F30%2F20150530141552_xZKFz.thumb.700_0.jpeg",
		msg:"柴小猪",
		icon_url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/fe031420-3b4c-11eb-bd01-97bc1429a9ff.png",
		number: "430",
		text: "华佗人物画像 中国画 线条画 毛笔画 彩色画",
		},
		{
		id: 5,
		image_url:
		"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599476215687&di=97c2bbf6f3a1a3e2a6a2dc77dfe4bea7&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F72%2F82%2F19300000009075130804824786610.jpg",
		title: "恐龙",
		type: 0,
		image1_url:
		"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3064153946,1819584304&fm=11&gp=0.jpg",
		msg:"hhh",
		icon_url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/fe031420-3b4c-11eb-bd01-97bc1429a9ff.png",
		number: "987",
		text: "恐龙来啦",
		}, 
	]
	export default {
		name: 'me',
		components:{
			waterfallsFlow
		},
		data() {
			return {
				current: 0
			}
		},
		computed:{
			list:function(){
				let that = this;
				let myList =list.filter((item)=>{
					return item.type === that.current
				})
				return myList
			}	
		},
		methods:{
			addNum(id){
				// console.log('aa');
				let list = this.list
				for(let l of list){
					if(l.id === id){
						l.number++;
						this.$forceUpdate() // 强制更新
						break;
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.header{
		width: 100%;
		height: 240px;
		background: #979C9C;
	}
	.myMsg-header{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-top: 20px;
	}
	.myMsg-txt,
	.msg{
		margin-left: 20PX;
		color: white;
	}
	.title{
		font-size: 44rpx;
	}
	.title-msg{
		font-size: 10px;
	}
	.img image{
		width: 100px;
		height: 100px;
		border-radius: 50px;
		margin-left: 16px;
	}
	.detial image{
		width: 18px;
		height: 18px;
	}
	.detial,
	.city,
	.class{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 44px;
		height: 28px;
		background-color: gray;
		border-radius: 8px;
		font-size: 12px;
		margin-right: 10px;
		
	}
	.myMsg-list{
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 6px;
	}
	.msg{
		margin-top: 18px;
		font-size: 14px;
	}
	.msg-list{
		display: flex;
	}
	.msg-list-item{
		font-size: 14px;
		color: white;
		margin:20px 10px 10px 30px;
	}
	.msg-list-img{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 44px;
		height: 30px;
		background-color: gray;
		border-radius:10px;
		margin-left: 120px;
		margin-top: 20px;
	}
	.msg-list-img image{
		width: 16px;
		height: 16px;
	}
	
	.tab {
		position: relative;
	}
	.tab-title {
		display: flex;
		background: #FCFFF5;
		font-size: 16px;
		font-weight: 500;
		border: 1px solid #F8F8F8;
		border-radius: 14px;
		
		.tab-title-item {
			width: 50%;
		
		}
	}
	.tab-title-item1{
		margin:10px 0 10px 60px;
	}
	.tab-title-item2{
		margin:10px 10px 10px 60px;
	}
	
	.content {
		padding: 10px;
	
		.cnt {
			padding: 10px;
	
			.title {
				font-size: 16px;
			}
	
			.text {
				font-size: 14px;
				margin-top: 5px;
			}
		}
	}
	
	.tab {
		position: relative;
	}
	
	.tab-list {
		position: absolute;
		top: 40px;
		width: 100%;
		padding-top: 10px;
		display: flex;
		background: #eee;
		font-size: 14px;
	}
	
	.tab-title-item1,
	.tab-title-item2,
	.tab-title-item3,
	.tab-title-item4,
	.tab-title-item5 {
		padding-left: 50px;
		color: #FF6138;
	}
	.bottom{
		height:30px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 12px;
		margin-top: 10px;
	}
	
	.bottom-img image{
		width: 30px;
		height: 30px;
		border-radius: 40px;
	}
	.bottom-msg{
		padding-left: 10px;
	}
	.bottom-icon image{
		width: 20px;
		height: 20px;
		padding-left: 50px;
		padding-right: 10px;
	}
	
</style>
